<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0056)http://javascript.internet.com/games/connect-4-demo.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>BODY {
	BACKGROUND-COLOR: white
}
IMG {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
A:visited {
	COLOR: blue
}
FONT.score {
	FONT-SIZE: large; COLOR: blue
}
FONT.redscore {
	COLOR: red
}
FONT.blackscore {
	COLOR: black
}
</STYLE>

<SCRIPT language=JavaScript>

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var vals = new Array()
var gameActive = 0
function rePlay() {
if (gameActive == 1) {
document.formo.redScoreBoard.value = redScore + ""
document.formo.blackScoreBoard.value = blackScore + ""
clearBoard()
}
for (var c1 = 0; c1 <= 6; c1++) {
vals[c1] = 0
   }
}

var redSpot = new Image()
var blackSpot = new Image()
var emptySpot = new Image()
var emptyChecker = new Image()
var redChecker = new Image()
var blackChecker = new Image()

redSpot.src = "fillred.gif"
blackSpot.src = "fillblack.gif"
emptySpot.src = "fillempty.gif"
emptyChecker.src = "clearness.gif"
redChecker.src = "redchecker.gif"
blackChecker.src = "blackchecker.gif"

var whosTurn = "red"
var whosTurnSpot = new Image()
var whosTurnChecker = new Image()
whosTurnSpot.src = redSpot.src
whosTurnChecker.src = redChecker.src

function clearBoard() {
for (var a = 7; a <= 48; a++) {
document.images[a].src = emptySpot.src
   }
}
function placeTop(picToPlace) {
if (gameActive == 1) {
document.images[picToPlace].src = whosTurnChecker.src
   }
}
function unPlaceTop(picToUnplace) {
if (gameActive == 1) {
document.images[picToUnplace].src = emptyChecker.src
   }
}
var placeLoc
function dropIt(whichRow) {
if (gameActive == 1) {
//alert("func dropIt")
placeLoc = (7 - vals[whichRow]) * 7 -7 + whichRow
if (vals[whichRow] < 6) {
document.images[placeLoc].src = whosTurnSpot.src
vals[whichRow] = vals[whichRow] + 1
checkForWinner(whosTurn)
switchTurns()
placeTop(whichRow)
      }
   }
}
function whoGoesFirst() {
whosTurn = whosFirst
switchTurns()
if (whosFirst == "red") {
whosFirst = "black"
} else {
whosFirst = "red"
   }
}
function switchTurns() {
if (gameActive == 1) {
//alert("func switchTurns")
if (whosTurn == "red") {
whosTurn = "black"
whosTurnSpot.src = blackSpot.src
whosTurnChecker.src = blackChecker.src
document.formo.texter.value = blackPlayer + "'s turn."
} else {
whosTurn = "red"
whosTurnSpot.src = redSpot.src
whosTurnChecker.src = redChecker.src
document.formo.texter.value = redPlayer + "'s turn."
      }
   }
}
var redPlayer
var blackPlayer
var whosFirst
function askForNames() {
if (gameActive == 1) {
//alert("func askForNames")
redScore = 0
blackScore = 0
document.formo.redScoreBoard.value = redScore + ""
document.formo.blackScoreBoard.value = blackScore + ""
matchMade = 1
redPlayer = prompt("What is the name of the red player?", "")
blackPlayer = prompt("What is the name of the black player?", "")
whosFirst = prompt("Which player is going first?", "")
if (redPlayer == null || redPlayer == "") {
redPlayer = "Red Player"
}
if (blackPlayer == null || blackPlayer == "") {
blackPlayer = "Black Player"
}
if (whosFirst == "r" || whosFirst == "red" || whosFirst == redPlayer) {
document.formo.texter.value = redPlayer + "'s turn."
whosTurn = "black"
switchTurns()
whosFirst = "red"
} else {
document.formo.texter.value = blackPlayer + "'s turn."
whosTurn = "red"
switchTurns()
whosFirst = "black"
       }
   }
}
var lookForSrc
var redScore = 0
var blackScore = 0
var someOneWon
var rowsFull = 0
function checkForWinner(colorToCheck) {
if (gameActive == 1) {
//alert("func checkForWinner")
someOneWon = 0
if (colorToCheck == "red") {
lookForSrc = redSpot.src
}
if (colorToCheck == "black") {
lookForSrc = blackSpot.src
}
rowsFull = 0
//alert("LookForSrc = " + lookForSrc + ".  And document.images[7].src = " + document.images[7].src)
for (var counter = 7; counter <= 48; counter++) {
if (document.images[counter].src == lookForSrc) {
if ((counter + 3 <= 48 
&& counter != 11 && counter != 12 && counter != 13 
&& counter != 18 && counter != 19 && counter != 20 
&& counter != 25 && counter != 26 && counter != 27 
&& counter != 32 && counter != 33 && counter != 34 
&& counter != 39 && counter != 40 && counter != 41
&& document.images[counter + 1].src == lookForSrc
&& document.images[counter + 2].src == lookForSrc
&& document.images[counter + 3].src == lookForSrc) 
|| (counter + 3 * 7 <= 48
&& document.images[counter + 7].src == lookForSrc
&& document.images[counter + 7*2].src == lookForSrc
&& document.images[counter + 7*3].src == lookForSrc)
|| (counter + 3 * 7 <= 48
&& counter != 11 && counter != 12 && counter != 13 
&& counter != 18 && counter != 19 && counter != 20 
&& counter != 25 && counter != 26 && counter != 27 
&& document.images[counter + 7 + 1].src == lookForSrc
&& document.images[counter + 7*2 + 2].src == lookForSrc
&& document.images[counter + 7*3 + 3].src == lookForSrc)
|| (counter - 3 * 7 >= 7
&& counter != 32 && counter != 33 && counter != 34 
&& counter != 39 && counter != 40 && counter != 41
&& counter != 46 && counter != 47 && counter != 48
&& document.images[counter - 7 + 1].src == lookForSrc
&& document.images[counter - 7*2 + 2].src == lookForSrc
&& document.images[counter - 7*3 + 3].src == lookForSrc)) {
for (var c2 = 0; c2<= 6; c2++) {
unPlaceTop(c2)
}
if (colorToCheck == "red") {
alert(redPlayer + " wins.")
redScore += 1
} else if (colorToCheck == "black") {
alert(blackPlayer + " wins.")
blackScore += 1
}
gameActive = 0
someOneWon = 1
counter = 49
document.formo.redScoreBoard.value = redScore + ""
document.formo.blackScoreBoard.value = blackScore + ""
      }
   }
}
if (someOneWon != 1) {
for (var poo = 0; poo <= 6; poo++) {
if (vals[poo] == 6) {
rowsFull += 1
}
}
if (rowsFull == 7) {
for (var c3 = 0; c3<= 6; c3++) {
unPlaceTop(c3)
}
gameActive = 0
alert("This game has reached a draw.")
         }
      }
   }
}
var matchMade = 0
function newGame() {
if (matchMade == 1) {
gameActive = 1
rePlay()
whoGoesFirst()
   }
}
function newMatchUp() {
if (confirm("Are you sure you want to Start a new match?")) {
gameActive = 1
rePlay()
askForNames()
   }
}
function setMsg(whatToSay) {
window.status = whatToSay
return true
}
// End -->
</SCRIPT>

<META content="MSHTML 5.50.4611.1300" name=GENERATOR></HEAD>
<BODY onload=rePlay();>
<CENTER>
<FORM name=formo>
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/clearness.gif" width=50 border=0></A></TD>
    <TD align=right>Click to start --&gt; <INPUT onclick=newMatchUp() type=button value="New Match" name=startButton></TD></TR>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD align=right><INPUT onclick=newGame() type=button value="New Game" name=reStartButton></TD></TR>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD align=right><INPUT name=texter></TD></TR>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD vAlign=bottom align=right><FONT class=score>SCORE:</FONT><BR><FONT 
      class=redscore>Red</FONT>&nbsp;&nbsp;<FONT 
  class=blackscore>Black</FONT></TD></TR>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD vAlign=top align=right><INPUT size=3 name=redScoreBoard><INPUT size=3 
      name=blackScoreBoard></TD></TR>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD></TR>
  <TR>
    <TD><A onmouseover="placeTop(0); setMsg(''); return true" 
      onmouseout=unPlaceTop(0) href="javascript:void%20dropIt(0)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(1); setMsg(''); return true" 
      onmouseout=unPlaceTop(1) href="javascript:void%20dropIt(1)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(2); setMsg(''); return true" 
      onmouseout=unPlaceTop(2) href="javascript:void%20dropIt(2)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(3); setMsg(''); return true" 
      onmouseout=unPlaceTop(3) href="javascript:void%20dropIt(3)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(4); setMsg(''); return true" 
      onmouseout=unPlaceTop(4) href="javascript:void%20dropIt(4)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(5); setMsg(''); return true" 
      onmouseout=unPlaceTop(5) href="javascript:void%20dropIt(5)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 border=0></A></TD>
    <TD><A onmouseover="placeTop(6); setMsg(''); return true" 
      onmouseout=unPlaceTop(6) href="javascript:void%20dropIt(6)"><IMG height=50 
      src="connect-4-demo_files/fillempty.gif" width=50 
  border=0></A></TD></TR></TBODY></TABLE></FORM></CENTER></BODY></HTML>
